<template>
  <view
    class="special-issue-item-container u-border-bottom"
    @click="handleClick"
  >
    <view class="special-issue-item">
      <view class="special-issue-item-left">
        <view class="special-issue-item-left-title">
          {{ item.copyIssueName }}
        </view>
        <view class="special-issue-item-left-content">
          {{ item.issueDesc }}
        </view>

      </view>
      <view class="special-issue-item-right">
        <image
          class="special-issue-item-right-img"
          :src="item.issueCover"
        ></image>
      </view>
    </view>
    <view class="special-issue-item-bottom">
      <view class="special-issue-item-bottom-left-title">
        {{ item.issueName }}
      </view>
      <text v-if="false"
        class="icon special-issue-item-bottom-right-delete"
        @click.stop="handleDelete"
      ></text>
    </view>
  </view>
</template>

<script>
 export default {
  props: {
    item: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || "",
    };
  },
  methods: {
    handleClick() {
        console.log("专刊ID",this.item.issueId);
        uni.navigateTo({
        url: "/pagesSub/career/careerInfo/publicationDetail?id=" + this.item.issueId,
      });
    },
    handleDelete(e) {
        if(!this.personId) {
            uni.showToast({
            title: "请先登录",
            icon: 'none'
            });
            return;
        };
      this.$emit('delete', {item: this.item, detail: e.detail});
    }
  },
};
    
</script>

<style lang="scss" scoped>
.special-issue-item-container {
  display: flex;
  flex-direction: column;
  margin: 32rpx 32rpx;
  .special-issue-item {
    display: flex;
    justify-content: space-between;
    .special-issue-item-left {
      display: block;
    //   flex-direction: column;
      .special-issue-item-left-title {
        font-size: 32rpx;
        width: 488rpx;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        font-weight: bold;
        color: #222222;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .special-issue-item-left-content {
        margin-top: 20rpx;
        font-size: 26rpx;
        width: 488rpx;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        color: #888888;
        line-height: 48rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }

    .special-issue-item-right-img {
      float: right;
      border-radius: 20rpx;
      width: 182rpx;
      height: 182rpx;
    }
  }

  .special-issue-item-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 32rpx;
    margin-bottom: 32rpx;

    .special-issue-item-bottom-left-title {
      font-size: 22rpx;
      width: 488rpx;
      font-family: PingFang-SC-Heavy, PingFang-SC;
      color: #888888;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    &-right-delete {
      background-image: url($img-base+"career/delete.png");
      width: 36rpx;
      height: 36rpx;
    }
  }
  .icon {
    width: 36rpx;
    height: 36rpx;

  }
}
</style>
